<template>
  <div class="customer-container">
    <a-card class="search-card">
      <a-form :model="searchForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" layout="inline">
        <a-form-item label="客户姓名">
          <a-input v-model:value="searchForm.name" placeholder="请输入客户姓名" />
        </a-form-item>
        <a-form-item label="手机号">
          <a-input v-model:value="searchForm.phone" placeholder="请输入手机号" />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleSearch">
              <template #icon>
                <SearchOutlined />
              </template>
              搜索
            </a-button>
            <a-button @click="handleReset">
              <template #icon>
                <ReloadOutlined />
              </template>
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>

    <a-card class="table-card">
      <template #title>
        <span>客户列表</span>
      </template>
      <template #extra>
        <a-button type="primary" @click="handleAdd">
          <template #icon>
            <PlusOutlined />
          </template>
          新增客户
        </a-button>
      </template>
      <a-table :data-source="customerList" :columns="columns" :pagination="false" bordered>
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'customerStatus'">
            <a-switch 
              :checked="record.customerStatus === '正常'" 
              checked-children="正常" 
              un-checked-children="冻结" 
              @change="(checked) => handleStatusChange(checked, record)"
            />
          </template>
          <template v-else-if="column.dataIndex === 'blacklist'">
            <a-switch 
              :checked="record.blacklist === '是'" 
              checked-children="是" 
              un-checked-children="否" 
              @change="(checked) => handleBlacklistChange(checked, record)"
            />
          </template>
          <template v-else-if="column.dataIndex === 'action'">
            <div class="smart-table-operate">
              <a-button type="link" @click="handleEdit(record)">编辑</a-button>
              <a-button type="link" danger @click="handleDelete(record)">删除</a-button>
            </div>
          </template>
        </template>
      </a-table>
      <div class="pagination-container">
        <a-pagination
          show-size-changer
          show-quick-jumper
          :current="pageInfo.currentPage"
          :page-size-options="['10', '20', '50', '100']"
          :page-size="pageInfo.pageSize"
          v-model:pageSize="pageInfo.pageSize"
          :total="pageInfo.total"
          @show-size-change="handleSizeChange"
          @change="handleCurrentChange"
          :show-total="(total) => `共 ${total} 条`"
        />
      </div>
    </a-card>

    <!-- 客户详情对话框 -->
    <a-modal 
      :title="dialogTitle" 
      v-model:open="dialogVisible" 
      :width="1200" 
      @ok="submitForm"
    >
      <template #footer>
        <a-button @click="handleCancel">取消</a-button>
        <a-button @click="handleSimulate" type="primary" ghost>模拟</a-button>
        <a-button @click="submitForm" type="primary">确定</a-button>
      </template>
      
      <a-form ref="customerFormRef" :model="customerForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-tabs v-model:activeKey="activeTab">
          <!-- 用户基本信息 -->
          <a-tab-pane key="userBaseInfo" tab="基本信息">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="手机号" name="userBaseInfo.phone" :rules="[{ required: true, message: '请输入手机号' }]">
                  <a-input v-model:value="customerForm.userBaseInfo.phone" placeholder="请输入手机号" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="姓名" name="userBaseInfo.name">
                  <a-input v-model:value="customerForm.userBaseInfo.name" placeholder="请输入姓名" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="证件类型" name="userBaseInfo.documentType">
                  <a-input v-model:value="customerForm.userBaseInfo.documentType" placeholder="请输入证件类型" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="证件号码" name="userBaseInfo.idcard">
                  <a-input v-model:value="customerForm.userBaseInfo.idcard" placeholder="请输入证件号码" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="婚姻状况" name="userBaseInfo.marriage">
                  <a-select v-model:value="customerForm.userBaseInfo.marriage" placeholder="请选择婚姻状况">
                    <a-select-option value="1">未婚</a-select-option>
                    <a-select-option value="2">已婚</a-select-option>
                    <a-select-option value="3">离婚</a-select-option>
                    <a-select-option value="4">丧偶</a-select-option>
                    <a-select-option value="6">未知</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="受教育程度" name="userBaseInfo.education">
                  <a-select v-model:value="customerForm.userBaseInfo.education" placeholder="请选择受教育程度">
                    <a-select-option value="7">博士及以上</a-select-option>
                    <a-select-option value="6">研究生</a-select-option>
                    <a-select-option value="5">本科</a-select-option>
                    <a-select-option value="4">专科</a-select-option>
                    <a-select-option value="3">中专</a-select-option>
                    <a-select-option value="2">高中</a-select-option>
                    <a-select-option value="1">初中</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="住房类型" name="userBaseInfo.houseType">
                  <a-select v-model:value="customerForm.userBaseInfo.houseType" placeholder="请选择住房类型">
                    <a-select-option value="1">自建房</a-select-option>
                    <a-select-option value="2">租房</a-select-option>
                    <a-select-option value="3">集体宿舍</a-select-option>
                    <a-select-option value="4">其他</a-select-option>
                    <a-select-option value="5">自购商品房</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="年收入" name="userBaseInfo.yearIncome">
                  <a-select v-model:value="customerForm.userBaseInfo.yearIncome" placeholder="请选择年收入">
                    <a-select-option value="1">5万元及以下</a-select-option>
                    <a-select-option value="2">5万元~10万元</a-select-option>
                    <a-select-option value="3">10万元-20万元</a-select-option>
                    <a-select-option value="4">20万元-30万元</a-select-option>
                    <a-select-option value="5">30万元-50万元</a-select-option>
                    <a-select-option value="6">50万元以上</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="居住地址" name="userBaseInfo.liveAddress">
                  <a-cascader
                    v-model:value="liveAddressCascaderValue"
                    :options="provinceCityDistrictOptions"
                    :field-names="{ label: 'label', value: 'value', children: 'children' }"
                    placeholder="请选择居住地址"
                    change-on-select
                    @change="onLiveAddressChange"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="居住详细地址" name="userBaseInfo.liveAddr">
                  <a-input v-model:value="customerForm.userBaseInfo.liveAddr" placeholder="请输入居住详细地址" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="电子邮箱" name="userBaseInfo.email">
                  <a-input v-model:value="customerForm.userBaseInfo.email" placeholder="请输入电子邮箱" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="来源商户" name="userBaseInfo.merchantId" :rules="[{ required: true, message: '请选择来源商户' }]">
                  <a-select 
                    v-model:value="customerForm.userBaseInfo.merchantId" 
                    placeholder="请选择来源商户"
                    show-search
                    option-filter-prop="children"
                  >
                    <a-select-option 
                      v-for="merchant in merchantList" 
                      :key="merchant.id" 
                      :value="merchant.id"
                    >
                      {{ merchant.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-tab-pane>

          <!-- 身份证信息 -->
          <a-tab-pane key="identityInfo" tab="身份证信息">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="姓名（OCR）" name="identityInfo.name">
                  <a-input v-model:value="customerForm.identityInfo.name" placeholder="请输入姓名（OCR扫描）" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="身份证号（OCR）" name="identityInfo.idcard">
                  <a-input v-model:value="customerForm.identityInfo.idcard" placeholder="请输入身份证号（OCR扫描）" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="性别（OCR）" name="identityInfo.gender">
                  <a-input v-model:value="customerForm.identityInfo.gender" placeholder="请输入性别（OCR扫描）" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="民族（OCR）" name="identityInfo.nation">
                  <a-input v-model:value="customerForm.identityInfo.nation" placeholder="请输入民族（OCR扫描）" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="地址（OCR）" name="identityInfo.idcardAddr">
                  <a-input v-model:value="customerForm.identityInfo.idcardAddr" placeholder="请输入地址（OCR扫描）" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="发证机关（OCR）" name="identityInfo.office">
                  <a-input v-model:value="customerForm.identityInfo.office" placeholder="请输入发证机关（OCR扫描）" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="有效期开始（OCR）" name="identityInfo.startTime">
                  <a-input v-model:value="customerForm.identityInfo.startTime" placeholder="请输入有效期（OCR扫描）" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="有效期结束（OCR）" name="identityInfo.endTime">
                  <a-input v-model:value="customerForm.identityInfo.endTime" placeholder="请输入有效期（OCR扫描）" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="身份证正面图片" name="identityInfo.idcardFrontImg">
                  <a-input v-model:value="customerForm.identityInfo.idcardFrontImg" placeholder="请输入身份证正面图片链接" />
                </a-form-item>
                <!-- 身份证正面图片展示 -->
                <div class="image-preview-container" v-if="customerForm.identityInfo.idcardFrontImg">
                  <div class="image-preview-actions">
                    <a-button class="remove-btn" @click="() => removeImage('idcardFrontImg')" size="small">
                      <template #icon>
                        <DeleteOutlined />
                      </template>
                    </a-button>
                  </div>
                  <img 
                    :src="customerForm.identityInfo.idcardFrontImg" 
                    alt="身份证正面" 
                    class="image-preview"
                    @click="previewImage(customerForm.identityInfo.idcardFrontImg)"
                  />
                </div>
                <div v-else class="image-placeholder" @click="() => triggerFileUpload('idcardFrontImg')">
                  <div class="upload-placeholder">
                    <PlusOutlined />
                    <div>点击上传身份证正面图片</div>
                  </div>
                </div>
                <!-- 隐藏的文件上传输入框 -->
                <input 
                  type="file" 
                  ref="idcardFrontImgInput" 
                  style="display: none" 
                  @change="handleFileSelect('idcardFrontImg', $event)"
                  accept="image/*"
                />
              </a-col>
              <a-col :span="12">
                <a-form-item label="身份证反面图片" name="identityInfo.idcardBackImg">
                  <a-input v-model:value="customerForm.identityInfo.idcardBackImg" placeholder="请输入身份证反面图片链接" />
                </a-form-item>
                <!-- 身份证反面图片展示 -->
                <div class="image-preview-container" v-if="customerForm.identityInfo.idcardBackImg">
                  <div class="image-preview-actions">
                    <a-button class="remove-btn" @click="() => removeImage('idcardBackImg')" size="small">
                      <template #icon>
                        <DeleteOutlined />
                      </template>
                    </a-button>
                  </div>
                  <img 
                    :src="customerForm.identityInfo.idcardBackImg" 
                    alt="身份证反面" 
                    class="image-preview"
                    @click="previewImage(customerForm.identityInfo.idcardBackImg)"
                  />
                </div>
                <div v-else class="image-placeholder" @click="() => triggerFileUpload('idcardBackImg')">
                  <div class="upload-placeholder">
                    <PlusOutlined />
                    <div>点击上传身份证反面图片</div>
                  </div>
                </div>
                <!-- 隐藏的文件上传输入框 -->
                <input 
                  type="file" 
                  ref="idcardBackImgInput" 
                  style="display: none" 
                  @change="handleFileSelect('idcardBackImg', $event)"
                  accept="image/*"
                />
              </a-col>
            </a-row>
          </a-tab-pane>

          <!-- 活体信息 -->
          <a-tab-pane key="liveInfo" tab="活体信息">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="有源对比得分" name="liveInfo.faceScore">
                  <a-input v-model:value="customerForm.liveInfo.faceScore" placeholder="请输入有源对比得分" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="对比结果" name="liveInfo.faceStatus">
                  <a-input v-model:value="customerForm.liveInfo.faceStatus" placeholder="请输入对比结果" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="采集时间" name="liveInfo.faceTime">
                  <a-input v-model:value="customerForm.liveInfo.faceTime" placeholder="请输入采集时间" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item label="人脸图片" name="liveInfo.faceImg">
                  <a-input v-model:value="customerForm.liveInfo.faceImg" placeholder="请输入人脸图片链接" />
                </a-form-item>
                <!-- 人脸图片展示 -->
                <div class="image-preview-container" v-if="customerForm.liveInfo.faceImg">
                  <div class="image-preview-actions">
                    <a-button class="remove-btn" @click="() => removeImage('faceImg')" size="small">
                      <template #icon>
                        <DeleteOutlined />
                      </template>
                    </a-button>
                  </div>
                  <img 
                    :src="customerForm.liveInfo.faceImg" 
                    alt="人脸图片" 
                    class="image-preview"
                    @click="previewImage(customerForm.liveInfo.faceImg)"
                  />
                </div>
                <div v-else class="image-placeholder" @click="() => triggerFileUpload('faceImg')">
                  <div class="upload-placeholder">
                    <PlusOutlined />
                    <div>点击上传人脸图片</div>
                  </div>
                </div>
                <!-- 隐藏的文件上传输入框 -->
                <input 
                  type="file" 
                  ref="faceImgInput" 
                  style="display: none" 
                  @change="handleFileSelect('faceImg', $event)"
                  accept="image/*"
                />
              </a-col>
            </a-row>
          </a-tab-pane>

          <!-- 联系人信息 -->
          <a-tab-pane key="contactsInfo" tab="联系人信息">
            <a-table 
              :data-source="customerForm.contactsInfo" 
              :columns="contactsColumns" 
              :pagination="false"
              size="small"
            >
              <template #bodyCell="{ column, record, index }">
                <template v-if="column.dataIndex === 'linkmanType'">
                  <span v-if="record.linkmanType === 1">紧急联系人</span>
                  <span v-else-if="record.linkmanType === 2">其他联系人</span>
                </template>
                <template v-else-if="column.dataIndex === 'relationship'">
                  <span v-if="record.relationship === 'parent'">父母</span>
                  <span v-else-if="record.relationship === 'spouse'">配偶</span>
                  <span v-else-if="record.relationship === 'children'">子女</span>
                  <span v-else-if="record.relationship === 'brothers'">兄弟姐妹</span>
                  <span v-else-if="record.relationship === 'friend'">朋友</span>
                  <span v-else-if="record.relationship === 'colleague'">同事</span>
                  <span v-else-if="record.relationship === 'other'">其他</span>
                  <span v-else>{{ record.relationship }}</span>
                </template>
                <template v-else-if="column.dataIndex === 'action'">
                  <div class="smart-table-operate">
                    <a-button type="link" @click="editContact(index)">编辑</a-button>
                    <a-button type="link" danger @click="removeContact(index)">删除</a-button>
                  </div>
                </template>
              </template>
            </a-table>
            <div style="margin-top: 10px;">
              <a-button type="dashed" style="width: 100%" @click="addContact">
                <template #icon>
                  <PlusOutlined />
                </template>
                添加联系人
              </a-button>
            </div>
            
            <!-- 联系人编辑对话框 -->
            <a-modal 
              :title="contactDialogTitle" 
              v-model:open="contactDialogVisible" 
              @ok="saveContact" 
              @cancel="cancelContactEdit"
            >
              <a-form :model="currentContact" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                <a-form-item label="联系人类型">
                  <a-radio-group v-model:value="currentContact.linkmanType">
                    <a-radio :value="1">紧急联系人</a-radio>
                    <a-radio :value="2">其他联系人</a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item label="联系人名称" name="name">
                  <a-input v-model:value="currentContact.name" placeholder="请输入联系人名称" />
                </a-form-item>
                <a-form-item label="联系人手机号" name="phone">
                  <a-input v-model:value="currentContact.phone" placeholder="请输入联系人手机号" />
                </a-form-item>
                <a-form-item label="联系人关系" name="relationship">
                  <a-select v-model:value="currentContact.relationship" placeholder="请选择联系人关系">
                    <a-select-option value="parent">父母</a-select-option>
                    <a-select-option value="spouse">配偶</a-select-option>
                    <a-select-option value="children">子女</a-select-option>
                    <a-select-option value="brothers">兄弟姐妹</a-select-option>
                    <a-select-option value="friend">朋友</a-select-option>
                    <a-select-option value="colleague">同事</a-select-option>
                    <a-select-option value="other">其他</a-select-option>
                  </a-select>
                </a-form-item>
              </a-form>
            </a-modal>
          </a-tab-pane>

          <!-- 公司信息 -->
          <a-tab-pane key="companyInfo" tab="公司信息">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="公司名称" name="companyInfo.companyName">
                  <a-input v-model:value="customerForm.companyInfo.companyName" placeholder="请输入公司名称" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="公司电话" name="companyInfo.companyTel">
                  <a-input v-model:value="customerForm.companyInfo.companyTel" placeholder="请输入公司电话" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="公司地址" name="companyInfo.companyAddress">
                  <a-cascader
                    v-model:value="companyAddressCascaderValue"
                    :options="provinceCityOptions"
                    :field-names="{ label: 'label', value: 'value', children: 'children' }"
                    placeholder="请选择公司地址"
                    change-on-select
                    @change="onCompanyAddressChange"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="公司详细地址" name="companyInfo.companyDetailAddress">
                  <a-input v-model:value="customerForm.companyInfo.companyAddress" placeholder="请输入公司详细地址" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="公司所属行业" name="companyInfo.companyIndustry">
                  <a-select v-model:value="customerForm.companyInfo.companyIndustry" placeholder="请选择公司所属行业">
                    <a-select-option value="1">农、林、牧、渔业</a-select-option>
                    <a-select-option value="2">采矿业</a-select-option>
                    <a-select-option value="3">制造业</a-select-option>
                    <a-select-option value="4">电力、燃气及水的生产和供应业</a-select-option>
                    <a-select-option value="5">建筑业</a-select-option>
                    <a-select-option value="6">交通运输、仓储和邮政业</a-select-option>
                    <a-select-option value="7">信息传输、计算机服务和软件业</a-select-option>
                    <a-select-option value="8">批发和零售业</a-select-option>
                    <a-select-option value="9">住宿和餐饮业</a-select-option>
                    <a-select-option value="10">金融业</a-select-option>
                    <a-select-option value="11">房地产业</a-select-option>
                    <a-select-option value="12">租赁和商务服务业</a-select-option>
                    <a-select-option value="13">科学研究、技术服务业和地质勘察业</a-select-option>
                    <a-select-option value="14">水利、环境和公共设施管理业</a-select-option>
                    <a-select-option value="15">居民服务和其他服务业</a-select-option>
                    <a-select-option value="16">教育</a-select-option>
                    <a-select-option value="17">卫生和社会工作</a-select-option>
                    <a-select-option value="18">文化、体育和娱乐业</a-select-option>
                    <a-select-option value="19">公共管理、社会保障和社会组织</a-select-option>
                    <a-select-option value="20">国际组织</a-select-option>
                    <a-select-option value="21">学生</a-select-option>
                    <a-select-option value="22">其他</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="公司性质类型" name="companyInfo.companyNatureType">
                  <a-select v-model:value="customerForm.companyInfo.companyNatureType" placeholder="请选择公司性质">
                    <a-select-option value="301">外商投资企业</a-select-option>
                    <a-select-option value="302">个体工商户</a-select-option>
                    <a-select-option value="303">政府机关</a-select-option>
                    <a-select-option value="304">私营</a-select-option>
                    <a-select-option value="305">国企</a-select-option>
                    <a-select-option value="306">合资</a-select-option>
                    <a-select-option value="307">民营</a-select-option>
                    <a-select-option value="308">事业单位</a-select-option>
                    <a-select-option value="309">有限责任公司</a-select-option>
                    <a-select-option value="310">股份责任公司</a-select-option>
                    <a-select-option value="311">独资企业</a-select-option>
                    <a-select-option value="312">合伙制企业</a-select-option>
                    <a-select-option value="300">其他</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="职业" name="companyInfo.professional">
                  <a-input v-model:value="customerForm.companyInfo.professional" placeholder="请输入职业" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-tab-pane>

          <!-- 设备信息 -->
          <a-tab-pane key="deviceInfo" tab="设备信息">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="系统类型" name="deviceInfo.osType">
                  <a-input v-model:value="customerForm.deviceInfo.osType" placeholder="请输入系统类型" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="设备品牌" name="deviceInfo.deviceBrand">
                  <a-input v-model:value="customerForm.deviceInfo.deviceBrand" placeholder="请输入设备品牌" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="设备型号" name="deviceInfo.deviceModel">
                  <a-input v-model:value="customerForm.deviceInfo.deviceModel" placeholder="请输入设备型号" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="设备号" name="deviceInfo.imei">
                  <a-input v-model:value="customerForm.deviceInfo.imei" placeholder="请输入设备号" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="登录设备IP" name="deviceInfo.ip">
                  <a-input v-model:value="customerForm.deviceInfo.ip" placeholder="请输入登录设备IP" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="GSM设备唯一号" name="deviceInfo.gsmImei">
                  <a-input v-model:value="customerForm.deviceInfo.gsmImei" placeholder="请输入GSM设备唯一号" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="CDMA设备唯一号" name="deviceInfo.cdmaMeid">
                  <a-input v-model:value="customerForm.deviceInfo.cdmaMeid" placeholder="请输入CDMA设备唯一号" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="网络类型" name="deviceInfo.networkType">
                  <a-input v-model:value="customerForm.deviceInfo.networkType" placeholder="请输入网络类型" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="运营商" name="deviceInfo.serviceName">
                  <a-input v-model:value="customerForm.deviceInfo.serviceName" placeholder="请输入运营商" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="无线局域网IP" name="deviceInfo.lanAddress">
                  <a-input v-model:value="customerForm.deviceInfo.lanAddress" placeholder="请输入无线局域网IP" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="内存大小" name="deviceInfo.mem">
                  <a-input v-model:value="customerForm.deviceInfo.mem" placeholder="请输入内存大小" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="数据来源" name="deviceInfo.dataSource">
                  <a-input v-model:value="customerForm.deviceInfo.dataSource" placeholder="请输入数据来源" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="是否模拟器" name="deviceInfo.isSimulator">
                  <a-input v-model:value="customerForm.deviceInfo.isSimulator" placeholder="请输入是否模拟器" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-tab-pane>

          <!-- 位置信息 -->
          <a-tab-pane key="positionInfo" tab="位置信息">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="经度" name="positionInfo.applyX">
                  <a-input v-model:value="customerForm.positionInfo.applyX" placeholder="请输入经度" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="纬度" name="positionInfo.applyY">
                  <a-input v-model:value="customerForm.positionInfo.applyY" placeholder="请输入纬度" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item label="申请时位置" name="positionInfo.applyLoc">
                  <a-input v-model:value="customerForm.positionInfo.applyLoc" placeholder="请输入申请时位置" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-tab-pane>

          <!-- IP信息 -->
          <a-tab-pane key="ipInfo" tab="IP信息">
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item label="IP地址" name="ipInfo.ipAddress">
                  <a-input v-model:value="customerForm.ipInfo.ipAddress" placeholder="请输入IP地址" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="IP解析省份" name="ipInfo.ipProvince">
                  <a-input v-model:value="customerForm.ipInfo.ipProvince" placeholder="请输入IP解析省份" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="IP解析城市" name="ipInfo.ipCity">
                  <a-input v-model:value="customerForm.ipInfo.ipCity" placeholder="请输入IP解析城市" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </a-form>
      
      <!-- 图片预览模态框 -->
      <a-modal 
        :open="imagePreviewVisible" 
        :footer="null" 
        @cancel="closeImagePreview"
        width="800px"
      >
        <img alt="预览图片" style="width: 100%" :src="previewImageUrl" />
      </a-modal>
    </a-modal>
  </div>
</template>

<script>
import { message, Modal } from 'ant-design-vue';
import { SearchOutlined, ReloadOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { PROVINCE_CITY } from '/@/components/framework/area-cascader/province-city';
import { PROVINCE_CITY_DISTRICT } from '/@/components/framework/area-cascader/province-city-district';

export default {
  name: 'CustomerManagement',
  components: {
    SearchOutlined,
    ReloadOutlined,
    PlusOutlined,
    DeleteOutlined
  },
  data() {
    return {
      provinceCityOptions: PROVINCE_CITY,
      provinceCityDistrictOptions: PROVINCE_CITY_DISTRICT,
      liveAddressCascaderValue: [],
      companyAddressCascaderValue: [],
      activeTab: 'userBaseInfo',
      searchForm: {
        name: '',
        phone: ''
      },
      customerList: [
        { id: 'C1001', name: '张三', phone: '13800138001', merchant: '商户一号', realNameStatus: '已实名', creditStatus: '已授信', customerStatus: '正常', blacklist: '否', registerTime: '2023-09-01 10:30:00', userBaseInfo: { merchantId: 'M001' } },
        { id: 'C1002', name: '李四', phone: '13800138002', merchant: '商户二号', realNameStatus: '未实名', creditStatus: '未授信', customerStatus: '正常', blacklist: '否', registerTime: '2023-08-25 14:45:00', userBaseInfo: { merchantId: 'M002' } },
        { id: 'C1003', name: '王五', phone: '13800138003', merchant: '商户一号', realNameStatus: '已实名', creditStatus: '授信中', customerStatus: '正常', blacklist: '是', registerTime: '2023-09-05 09:15:00', userBaseInfo: { merchantId: 'M001' } },
        { id: 'C1004', name: '赵六', phone: '13800138004', merchant: '商户三号', realNameStatus: '已实名', creditStatus: '已授信', customerStatus: '冻结', blacklist: '否', registerTime: '2023-08-30 16:20:00', userBaseInfo: { merchantId: 'M003' } }
      ],
      columns: [
        {
          title: '客户编号',
          dataIndex: 'id',
          key: 'id',
          width: 100
        },
        {
          title: '客户手机号',
          dataIndex: 'phone',
          key: 'phone',
          width: 120
        },
        {
          title: '客户姓名',
          dataIndex: 'name',
          key: 'name',
          width: 100
        },
        {
          title: '来源商户',
          dataIndex: 'merchant',
          key: 'merchant',
          width: 120
        },
        {
          title: '实名状态',
          dataIndex: 'realNameStatus',
          key: 'realNameStatus',
          width: 100
        },
        {
          title: '授信状态',
          dataIndex: 'creditStatus',
          key: 'creditStatus',
          width: 100
        },
        {
          title: '客户状态',
          dataIndex: 'customerStatus',
          key: 'customerStatus',
          width: 100
        },
        {
          title: '是否黑名单',
          dataIndex: 'blacklist',
          key: 'blacklist',
          width: 100
        },
        {
          title: '注册时间',
          dataIndex: 'registerTime',
          key: 'registerTime',
          width: 180
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          width: 150
        }
      ],
      contactsColumns: [
        {
          title: '联系人类型',
          dataIndex: 'linkmanType',
          key: 'linkmanType'
        },
        {
          title: '联系人名称',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '联系人手机号',
          dataIndex: 'phone',
          key: 'phone'
        },
        {
          title: '联系人关系',
          dataIndex: 'relationship',
          key: 'relationship'
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          width: 150
        }
      ],
      pageInfo: {
        currentPage: 1,
        pageSize: 10,
        total: 4
      },
      dialogVisible: false,
      dialogTitle: '',
      contactDialogVisible: false,
      contactDialogTitle: '',
      contactEditIndex: -1,
      currentContact: {
        linkmanType: 1,
        name: '',
        phone: '',
        relationship: ''
      },
      // 图片预览相关
      imagePreviewVisible: false,
      previewImageUrl: '',
      customerForm: {
        id: '',
        userBaseInfo: {
          phone: '',
          name: '',
          documentType: '',
          idcard: '',
          marriage: '',
          education: '',
          houseType: '',
          yearIncome: '',
          liveProvinceCode: '',
          liveProvince: '',
          liveCityCode: '',
          liveCity: '',
          liveDistrictCode: '',
          liveDistrict: '',
          liveAddr: '',
          email: ''
        },
        liveInfo: {
          faceImg: '',
          faceScore: '',
          faceStatus: '',
          faceTime: ''
        },
        identityInfo: {
          name: '',
          idcard: '',
          gender: '',
          nation: '',
          idcardAddr: '',
          office: '',
          startTime: '',
          endTime: '',
          idcardFrontImg: '',
          idcardBackImg: ''
        },
        applyInfo: {},
        contactsInfo: [
          {
            linkmanType: 1,
            name: '张三',
            phone: '13800138000',
            relationship: '父子'
          }
        ],
        companyInfo: {
          companyName: '',
          companyTel: '',
          companyProvince: '',
          companyCity: '',
          companyDistrict: '',
          companyAddress: '',
          companyIndustry: '',
          companyNatureType: '',
          professional: ''
        },
        deviceInfo: {
          osType: '',
          deviceBrand: '',
          deviceModel: '',
          imei: '',
          ip: '',
          gsmImei: '',
          cdmaMeid: '',
          networkType: '',
          serviceName: '',
          lanAddress: '',
          mem: '',
          dataSource: '',
          isSimulator: ''
        },
        positionInfo: {
          applyX: '',
          applyY: '',
          applyLoc: ''
        },
        ipInfo: {
          ipAddress: '',
          ipProvince: '',
          ipCity: ''
        }
      },
      customerRules: {
        name: [
          { required: true, message: '请输入客户姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ]
      },
      customerFormRef: null,
      editingContactIndex: -1,
      // 商户列表数据（模拟）
      merchantList: [
        { id: 'M001', name: '商户一号' },
        { id: 'M002', name: '商户二号' },
        { id: 'M003', name: '商户三号' }
      ],
      // 状态变更确认对话框相关
      confirmModal: {
        visible: false,
        title: '',
        content: '',
        onOk: null,
        onCancel: null
      }
    }
  },
  methods: {
    // 触发文件上传
    triggerFileUpload(imageType) {
      const inputRef = `${imageType}Input`;
      if (this.$refs[inputRef]) {
        this.$refs[inputRef].click();
      }
    },
    
    // 处理文件选择
    handleFileSelect(imageType, event) {
      const file = event.target.files[0];
      if (file) {
        // 在实际应用中，这里会调用文件上传接口
        // 这里我们使用模拟图片URL
        const mockImageUrl = 'https://q6.itc.cn/q_70/images01/20250221/bf18571ca2eb4d029931fef26b71c4d5.png';
        
        switch (imageType) {
          case 'idcardFrontImg':
            this.customerForm.identityInfo.idcardFrontImg = mockImageUrl;
            break;
          case 'idcardBackImg':
            this.customerForm.identityInfo.idcardBackImg = mockImageUrl;
            break;
          case 'faceImg':
            this.customerForm.liveInfo.faceImg = mockImageUrl;
            break;
          default:
            break;
        }
        
        message.success('图片上传成功');
      }
      
      // 清空input的value，确保下次选择同一文件也能触发change事件
      event.target.value = '';
    },
    
    // 删除图片
    removeImage(imageType) {
      switch (imageType) {
        case 'idcardFrontImg':
          this.customerForm.identityInfo.idcardFrontImg = '';
          break;
        case 'idcardBackImg':
          this.customerForm.identityInfo.idcardBackImg = '';
          break;
        case 'faceImg':
          this.customerForm.liveInfo.faceImg = '';
          break;
        default:
          break;
      }
      
      message.success('图片删除成功');
    },
    
    onLiveAddressChange(value, selectedOptions) {
      if (selectedOptions && selectedOptions.length > 0) {
        // 更新用户居住地址信息
        this.customerForm.userBaseInfo.liveProvinceCode = selectedOptions[0]?.value || '';
        this.customerForm.userBaseInfo.liveProvince = selectedOptions[0]?.label || '';
        this.customerForm.userBaseInfo.liveCityCode = selectedOptions[1]?.value || '';
        this.customerForm.userBaseInfo.liveCity = selectedOptions[1]?.label || '';
        this.customerForm.userBaseInfo.liveDistrictCode = selectedOptions[2]?.value || '';
        this.customerForm.userBaseInfo.liveDistrict = selectedOptions[2]?.label || '';
      } else {
        // 清空地址信息
        this.customerForm.userBaseInfo.liveProvinceCode = '';
        this.customerForm.userBaseInfo.liveProvince = '';
        this.customerForm.userBaseInfo.liveCityCode = '';
        this.customerForm.userBaseInfo.liveCity = '';
        this.customerForm.userBaseInfo.liveDistrictCode = '';
        this.customerForm.userBaseInfo.liveDistrict = '';
      }
    },
    
    onCompanyAddressChange(value, selectedOptions) {
      if (selectedOptions && selectedOptions.length > 0) {
        // 更新公司地址信息
        this.customerForm.companyInfo.companyProvince = selectedOptions[0]?.label || '';
        this.customerForm.companyInfo.companyCity = selectedOptions[1]?.label || '';
        // 对于省市级联，可能只有两级
        this.customerForm.companyInfo.companyDistrict = selectedOptions[2]?.label || '';
      } else {
        // 清空地址信息
        this.customerForm.companyInfo.companyProvince = '';
        this.customerForm.companyInfo.companyCity = '';
        this.customerForm.companyInfo.companyDistrict = '';
      }
    },
    
    // 联系人编辑相关方法
    addContact() {
      this.contactDialogTitle = '新增联系人';
      this.contactEditIndex = -1;
      this.currentContact = {
        linkmanType: 1,
        name: '',
        phone: '',
        relationship: ''
      };
      this.contactDialogVisible = true;
    },
    
    editContact(index) {
      this.contactDialogTitle = '编辑联系人';
      this.contactEditIndex = index;
      // 深拷贝联系人信息
      this.currentContact = { ...this.customerForm.contactsInfo[index] };
      this.contactDialogVisible = true;
    },
    
    saveContact() {
      if (this.contactEditIndex === -1) {
        // 新增联系人
        this.customerForm.contactsInfo.push({ ...this.currentContact });
      } else {
        // 编辑联系人
        this.customerForm.contactsInfo.splice(this.contactEditIndex, 1, { ...this.currentContact });
      }
      this.contactDialogVisible = false;
    },
    
    cancelContactEdit() {
      this.contactDialogVisible = false;
    },
    
    removeContact(index) {
      this.customerForm.contactsInfo.splice(index, 1);
    },
    
    // 图片链接复制功能
    copyLink(url) {
      navigator.clipboard.writeText(url).then(() => {
        message.success('链接已复制到剪贴板');
      }).catch(() => {
        message.error('复制失败');
      });
    },
    
    // 图片预览功能
    previewImage(url) {
      this.previewImageUrl = url;
      this.imagePreviewVisible = true;
    },
    
    // 关闭图片预览
    closeImagePreview() {
      this.imagePreviewVisible = false;
      this.previewImageUrl = '';
    },
    
    getLevelType(level) {
      switch (level) {
        case '普通客户':
          return '';
        case '金牌客户':
          return 'warning';
        case '钻石客户':
          return 'success';
        default:
          return '';
      }
    },
    handleSearch() {
      message.info('执行搜索操作');
    },
    handleReset() {
      this.searchForm = {
        name: '',
        phone: ''
      };
      message.info('重置搜索条件');
    },
    handleAdd() {
      this.dialogTitle = '新增客户';
      this.customerForm = {
        id: '',
        userBaseInfo: {
          phone: '',
          name: '',
          documentType: '',
          idcard: '',
          marriage: '',
          education: '',
          houseType: '',
          yearIncome: '',
          liveProvinceCode: '',
          liveProvince: '',
          liveCityCode: '',
          liveCity: '',
          liveDistrictCode: '',
          liveDistrict: '',
          liveAddr: '',
          email: '',
          merchantId: undefined
        },
        liveInfo: {
          faceImg: '',
          faceScore: '',
          faceStatus: '',
          faceTime: ''
        },
        identityInfo: {
          name: '',
          idcard: '',
          gender: '',
          nation: '',
          idcardAddr: '',
          office: '',
          startTime: '',
          endTime: '',
          idcardFrontImg: '',
          idcardBackImg: ''
        },
        applyInfo: {},
        contactsInfo: [],
        companyInfo: {
          companyName: '',
          companyTel: '',
          companyProvince: '',
          companyCity: '',
          companyDistrict: '',
          companyAddress: '',
          companyIndustry: '',
          companyNatureType: '',
          professional: ''
        },
        deviceInfo: {
          osType: '',
          deviceBrand: '',
          deviceModel: '',
          imei: '',
          ip: '',
          gsmImei: '',
          cdmaMeid: '',
          networkType: '',
          serviceName: '',
          lanAddress: '',
          mem: '',
          dataSource: '',
          isSimulator: ''
        },
        positionInfo: {
          applyX: '',
          applyY: '',
          applyLoc: ''
        },
        ipInfo: {
          ipAddress: '',
          ipProvince: '',
          ipCity: ''
        }
      };
      this.liveAddressCascaderValue = [];
      this.companyAddressCascaderValue = [];
      this.dialogVisible = true;
    },
    handleEdit(record) {
      this.dialogTitle = '编辑客户';
      // 深拷贝记录以避免修改原始数据
      this.customerForm = JSON.parse(JSON.stringify(record));
      
      // 初始化居住地址级联选择器的值
      const liveValues = [];
      if (this.customerForm.userBaseInfo.liveProvinceCode) {
        liveValues.push(this.customerForm.userBaseInfo.liveProvinceCode);
      }
      if (this.customerForm.userBaseInfo.liveCityCode) {
        liveValues.push(this.customerForm.userBaseInfo.liveCityCode);
      }
      if (this.customerForm.userBaseInfo.liveDistrictCode) {
        liveValues.push(this.customerForm.userBaseInfo.liveDistrictCode);
      }
      this.liveAddressCascaderValue = liveValues;
      
      // 初始化公司地址级联选择器的值
      this.companyAddressCascaderValue = [];
      
      // 初始化联系人编辑状态
      this.contactEditIndex = -1;
      this.currentContact = {
        linkmanType: 1,
        name: '',
        phone: '',
        relationship: ''
      };
      
      // 确保 merchantId 字段存在
      if (!this.customerForm.userBaseInfo.merchantId) {
        this.customerForm.userBaseInfo.merchantId = undefined;
      }
      
      this.dialogVisible = true;
    },
    // 处理客户状态变更
    handleStatusChange(checked, record) {
      const newStatus = checked ? '正常' : '冻结';
      const oldStatus = record.customerStatus;
      
      Modal.confirm({
        title: '确认操作',
        content: `确定要将客户"${record.name}"的状态从"${oldStatus}"修改为"${newStatus}"吗？`,
        okText: '确定',
        okType: 'primary',
        cancelText: '取消',
        onOk: () => {
          // 更新客户状态
          record.customerStatus = newStatus;
          message.success(`客户状态已更新为"${newStatus}"`);
        },
        onCancel: () => {
          // 恢复开关状态
          record.customerStatus = oldStatus;
          message.info('已取消操作');
        }
      });
    },
    
    // 处理黑名单状态变更
    handleBlacklistChange(checked, record) {
      const newStatus = checked ? '是' : '否';
      const oldStatus = record.blacklist;
      
      Modal.confirm({
        title: '确认操作',
        content: `确定要将客户"${record.name}"的黑名单状态从"${oldStatus}"修改为"${newStatus}"吗？`,
        okText: '确定',
        okType: 'primary',
        cancelText: '取消',
        onOk: () => {
          // 更新黑名单状态
          record.blacklist = newStatus;
          message.success(`黑名单状态已更新为"${newStatus}"`);
        },
        onCancel: () => {
          // 恢复开关状态
          record.blacklist = oldStatus;
          message.info('已取消操作');
        }
      });
    },
    
    handleDelete(record) {
      Modal.confirm({
        title: '提示',
        content: `确定要删除客户"${record.name}"吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          message.success('删除成功');
        },
        onCancel: () => {
          message.info('已取消删除');
        }
      });
    },
    handleSizeChange(current, pageSize) {
      this.pageInfo.pageSize = pageSize;
      message.info(`每页显示${pageSize}条`);
    },
    handleCurrentChange(page, pageSize) {
      this.pageInfo.currentPage = page;
      message.info(`当前页: ${page}`);
    },
    handleCancel() {
      this.dialogVisible = false;
    },
    
    handleSimulate() {
      // 根据不同的模式执行不同的逻辑
      if (this.dialogTitle === '编辑客户') {
        // 编辑模式下显示模拟调用过程
        message.info('正在模拟调用用户详情接口...');
        
        // 模拟接口调用延迟
        setTimeout(() => {
          this.fillSimulationData();
          message.success('模拟调用用户详情接口成功');
        }, 1000);
      } else {
        // 新增模式下直接填充模拟数据，不显示提示
        this.fillSimulationData();
      }
    },
    
    // 填充模拟数据的通用方法
    fillSimulationData() {
      // 动态生成客户信息
      const names = ['张伟', '王芳', '李娜', '刘强', '陈杰', '杨丽', '黄涛', '周军', '吴倩', '徐磊', '孙超', '胡敏', '郭庆', '何芳', '林峰'];
      const surnames = ['张', '王', '李', '刘', '陈', '杨', '黄', '周', '吴', '徐', '孙', '胡', '郭', '何', '林'];
      const phones = ['138', '139', '137', '136', '135', '159', '158', '157', '156', '155', '188', '189', '187', '186', '185'];
      
      // 随机生成姓名和手机号
      const randomName = names[Math.floor(Math.random() * names.length)];
      const randomPhone = phones[Math.floor(Math.random() * phones.length)] + Math.random().toString().slice(2, 11);
      
      // 随机生成身份证号（模拟）
      const randomIdCard = Math.floor(Math.random() * 100000000000000000).toString().padStart(18, '0');
      
      // 随机生成邮箱
      const randomEmail = randomName + Math.floor(Math.random() * 1000) + '@example.com';
      
      const imageUrl = 'https://q6.itc.cn/q_70/images01/20250221/bf18571ca2eb4d029931fef26b71c4d5.png';
      
      // 模拟接口返回的用户详情数据
      const userData = {
        id: 'C' + Math.floor(Math.random() * 10000).toString().padStart(4, '0'),
        userBaseInfo: {
          phone: randomPhone,
          name: randomName,
          documentType: '身份证',
          idcard: randomIdCard,
          marriage: Math.floor(Math.random() * 4 + 1).toString(),
          education: Math.floor(Math.random() * 7 + 1).toString(),
          houseType: Math.floor(Math.random() * 5 + 1).toString(),
          yearIncome: Math.floor(Math.random() * 6 + 1).toString(),
          liveProvinceCode: '',
          liveProvince: '',
          liveCityCode: '',
          liveCity: '',
          liveDistrictCode: '',
          liveDistrict: '',
          liveAddr: '某某街道' + Math.floor(Math.random() * 100) + '号',
          email: randomEmail,
          merchantId: 'M' + Math.floor(Math.random() * 3 + 1).toString().padStart(3, '0')
        },
        identityInfo: {
          name: randomName,
          idcard: randomIdCard,
          gender: Math.random() > 0.5 ? '男' : '女',
          nation: '汉',
          idcardAddr: '某某省某某市某某区某某街道' + Math.floor(Math.random() * 100) + '号',
          office: '某某市公安局某某分局',
          startTime: '2020-01-01',
          endTime: '2030-01-01',
          idcardFrontImg: imageUrl,
          idcardBackImg: imageUrl
        },
        liveInfo: {
          faceImg: imageUrl,
          faceScore: (Math.random() * 40 + 60).toFixed(1), // 60-100之间的分数
          faceStatus: Math.random() > 0.1 ? '通过' : '不通过', // 90%通过率
          faceTime: '2023-' + (Math.floor(Math.random() * 12) + 1).toString().padStart(2, '0') + '-' + (Math.floor(Math.random() * 28) + 1).toString().padStart(2, '0') + ' ' + (Math.floor(Math.random() * 24)).toString().padStart(2, '0') + ':00:00'
        },
        contactsInfo: [
          {
            linkmanType: 1,
            name: surnames[Math.floor(Math.random() * surnames.length)] + '某',
            phone: phones[Math.floor(Math.random() * phones.length)] + Math.random().toString().slice(2, 11),
            relationship: ['parent', 'spouse', 'children', 'brothers', 'friend', 'colleague'][Math.floor(Math.random() * 6)]
          },
          {
            linkmanType: 2,
            name: surnames[Math.floor(Math.random() * surnames.length)] + '某',
            phone: phones[Math.floor(Math.random() * phones.length)] + Math.random().toString().slice(2, 11),
            relationship: ['parent', 'spouse', 'children', 'brothers', 'friend', 'colleague'][Math.floor(Math.random() * 6)]
          }
        ],
        companyInfo: {
          companyName: '某某' + ['科技', '贸易', '咨询', '服务', '制造'][Math.floor(Math.random() * 5)] + '有限公司',
          companyTel: '010-' + Math.random().toString().slice(2, 10),
          companyProvince: '',
          companyCity: '',
          companyDistrict: '',
          companyAddress: '某某市某某区某某大厦' + Math.floor(Math.random() * 100) + '室',
          companyIndustry: Math.floor(Math.random() * 22 + 1).toString(),
          companyNatureType: Math.floor(Math.random() * 12 + 300).toString(),
          professional: ['软件工程师', '销售经理', '财务主管', '人事专员', '运营总监'][Math.floor(Math.random() * 5)]
        },
        deviceInfo: {
          osType: Math.random() > 0.5 ? 'Android' : 'iOS',
          deviceBrand: ['华为', '小米', '苹果', 'OPPO', 'VIVO'][Math.floor(Math.random() * 5)],
          deviceModel: ['Model' + Math.floor(Math.random() * 100), 'iPhone' + (Math.floor(Math.random() * 10) + 5)][Math.floor(Math.random() * 2)],
          imei: Math.random().toString().slice(2, 17),
          ip: '192.168.' + Math.floor(Math.random() * 255) + '.' + Math.floor(Math.random() * 255),
          gsmImei: Math.random().toString().slice(2, 17),
          cdmaMeid: Math.random().toString(36).slice(2, 11).toUpperCase(),
          networkType: ['4G', '5G', 'WIFI'][Math.floor(Math.random() * 3)],
          serviceName: ['中国移动', '中国联通', '中国电信'][Math.floor(Math.random() * 3)],
          lanAddress: '192.168.' + Math.floor(Math.random() * 255) + '.' + Math.floor(Math.random() * 255),
          mem: [4, 8, 12, 16][Math.floor(Math.random() * 4)] + 'GB',
          dataSource: 'APP采集',
          isSimulator: Math.random() > 0.95 ? '是' : '否' // 5%概率是模拟器
        },
        positionInfo: {
          applyX: (Math.random() * 10 + 110).toFixed(6),
          applyY: (Math.random() * 10 + 30).toFixed(6),
          applyLoc: '某某省某某市某某区某某地点'
        },
        ipInfo: {
          ipAddress: '192.168.' + Math.floor(Math.random() * 255) + '.' + Math.floor(Math.random() * 255),
          ipProvince: '某某省',
          ipCity: '某某市'
        }
      };
      
      // 将接口返回的数据填充到表单中
      this.customerForm = {
        ...this.customerForm,
        ...userData
      };
      
      // 更新级联选择器的值
      this.liveAddressCascaderValue = [];
      this.companyAddressCascaderValue = [];
    },
    
    submitForm() {
      this.$refs.customerFormRef.validate().then(() => {
        message.success('保存成功');
        this.dialogVisible = false;
      }).catch(() => {
        // 验证失败
      });
    }
  }
}
</script>

<style scoped>
.customer-container {
  padding: 20px;
}

.search-card,
.table-card {
  margin-bottom: 20px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

:deep(.ant-form-item) {
  margin-bottom: 12px;
}

/* 图片字段容器样式 */
.image-field-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.image-field-actions {
  display: flex;
  gap: 5px;
}

/* 图片预览容器样式 */
.image-preview-container {
  margin-top: 10px;
  position: relative;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  padding: 10px;
  text-align: center;
}

.image-preview {
  max-width: 100%;
  max-height: 200px;
  cursor: pointer;
  border-radius: 4px;
}

.image-preview-actions {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 10;
}

.remove-btn {
  background: rgba(0, 0, 0, 0.4);
  border: none;
  color: white;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.remove-btn:hover {
  background: rgba(0, 0, 0, 0.6);
  color: white;
}

.image-placeholder {
  margin-top: 10px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  color: #999;
  transition: border-color 0.3s;
}

.image-placeholder:hover {
  border-color: #1890ff;
}

.upload-placeholder {
  font-size: 14px;
}

.upload-placeholder .anticon {
  font-size: 24px;
  margin-bottom: 8px;
}
</style>